
const panelPos = {
  width : 1200,
  marginTop : 48,
  marginBottom : 48,
  marginLeft : 90,
  marginRight : 90,
};



const launchRowPos = {
  height : 45,

  vehicleX : 0,
  vehicleY : 6,

  orbitLEOX : 260,
  orbitMEOX : 330,
  orbitGTOX : 400,
  orbitHCOX : 470,
  orbitY : 20,
  orbitTextY : 42, // bottom
  orbitText3TY : 21, // bottom
  orbitText3BY : 37, // bottom

  siteSignXOffset : -21,
  siteXOffset : -27,
  siteY : 9, // bottom

  dayX : 986, // center
  dayY : 32, // center

  payloadX : 930, // right
  payloadMarginLeft : 20,
  payloadTagMarginLeft : 6,
  payloadTagY : 4, // top
  payload1Y : 32, // bottom
  payload2Y : 48, // bottom
};

const launchRowFont = {
  vehicleFontSize : 24,
  vehicleDescFontSize : 14,

  orbit1FontSize : 40,
  siteFontSize : 14,
  dayFontSize : 24,
  timeFontSize : 15,
  payload1FontSize : 28,
  payload2FontSize : 14,
};



const summaryRowPos = {
  yearX: 20,
  yearY: 30,

  allX: 280, // center
  allY1: 52, // bottom
  allY2: 94, // bottom

  itemStartX: 400,
  itemStartY: 26,
  itemStartYOffset: 50,
  itemHeight: 40,
  itemMarginLeft: 20,
};

const summaryRowFont = {
  yearFontSize : 72,

  allFontSize1 : 14,
  allFontSize2 : 40,

  itemFontSize1 : 12,
  itemFontSize2 : 20,
};

const layouts = {
  // Launches 位置信息
  position : {
    panel : panelPos,
    launchRow : launchRowPos,
    summaryRow : summaryRowPos,
  },

  font : {
    launchRow : launchRowFont,
    summaryRow : summaryRowFont
  },
};



class VehicleStyle {
  name = '';
  color = '#000';
  /** @type {string | null} */ path = null;
  /** @type {string[]} */ descList = [];

  load(o) {
    this.name = o.name ? o.name : o.type;
    this.color = o.color;
    if (o.path) {
      this.path = o.path;
    }
    if (o.desc) {
      this.descList = this.descList.concat(o.desc);
    }
    return this;
  }
}

class OrbitStyle {
  name = '';
  level = 0;
  /** @type {string[]} */ texts = [];
  color = '';

  load(o) {
    Object.assign(this, o);
    return this;
  }
}

class LayoutWraper {
  /** @type {string[]} 比如十月就是 monthsColor[10], [0] 是 null */
  monthsColor = [];
  vehicleMap = {};
  /** @type {VehicleStyle[]} */
  specialVehicles = [];
  
  orbitMap = {};
  launchRow = {
    payload : '#666',
    tagText : '#FFF',
  };
  fallOrbit = {
    path : '',
    pathColor : '',
  };

  /**
   * 相当于数据重置
   */
  load(o) {
    this.monthsColor = [null].concat(o.monthsColor);
    Object.assign(this.fallOrbit, o.fallOrbit);

    o.vehicles.forEach(v => this.vehicleMap[v.name] = new VehicleStyle().load(v));
    this.specialVehicles = o.specialVehicles.map(d => new VehicleStyle().load(d));

    o.orbits.forEach(v => this.orbitMap[v.name] = new OrbitStyle().load(v));

    return this;
  }

  vehicleStyle(name) {
    /** @type {VehicleStyle} */
    let v = this.vehicleMap[name];
    return v ? v : this.otherVehicleStyle();
  }

  mannedVehicleStyle() {
    let v = this.specialVehicles.find(s => s.name === 'manned');
    if (!v) {
      throw { msg : 'failed to find manned vehicle style', value : this };
    }
    return v;
  }

  otherVehicleStyle() {
    let v = this.specialVehicles.find(s => s.name === 'others');
    return v ? v : new VehicleStyle();
  }

  /**
   * @returns {OrbitStyle}
   */
  orbitStyle(name) {
    return this.orbitMap[name];
  }

  useLightTheme() {
    this.launchRow.payload = '#666';
    this.launchRow.tagText = '#FFF';
  }

  useDarkTheme() {
    this.launchRow.payload = '#DDD';
    this.launchRow.tagText = '#000';
  }
}

/**
 * @type {Promise<LayoutWraper> | LayoutWraper}
 */
let layoutCache = null;
function loadLayout(context) {
  if (layoutCache) {
    return layoutCache;
  }

  return layoutCache = fetch(context.assetPath('data/flightRecords/ver2023Style.json'))
    .then(d => d.json())
    .then(data => {
      let wraper = new LayoutWraper();
      wraper.load(data);
      return layoutCache = wraper;
    });
}

export {
  loadLayout,
  LayoutWraper,
  layouts,
}
